<!--
 * @author: Kate-sy
 * @create: 2021-06-22 09:50 AM
 * @license: MIT
 * @lastAuthor: Kate-sy
 * @lastEditTime: 2021-06-24 15:53 PM
 * @desc: 
-->
<template>
  <div class="thrnav-wrap">
    <div
      class="thritem"
      :key="item"
      v-for="item in thredata"
      @click="thecard($event)"
    >
      {{ item }}
    </div>
    <div class="sel">
      <select
        name="thend"
        id="thrend"
        :style="{ display: thnavend }"
        @click="iconclick($event)"
      >
        <option value="">3天内</option>
        <option value="">7天内</option>
        <option value="">30天内</option>
        <option value="">全部</option>
      </select>
      <div
        class="icon"
        :style="{
          display: thnavend,
          borderTop: d ? bortop : none,
          borderBottom: !d ? bortop : none,
        }"
      ></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Threenav",
  props: {
    // thnavend: String,
  },
  data() {
    return {
      thredata: ["热门", "最新", "热榜"],
      d: true,
      bortop: "6px solid #babac2",
      none: "none",
      thnavend: "none",
    };
  },
  methods: {
    thecard(e) {
      let thritem = document.querySelectorAll(".thritem");
      thritem.forEach((ele) => {
        ele.style.cssText = "color:#909090";
        if (ele.innerHTML == e.target.innerHTML) {
          this.thnavend = "block";
        } else {
          this.thnavend = "none";
        }
      });
      console.log(e.target.innerHTML);
      e.target.style.cssText = "color:#007fff";
      this.$emit("thecard", e);
    },
    iconclick() {
      this.d = !this.d;
    },
  },
};
</script>
<style lang="scss" scoped>
.thrnav-wrap {
  padding: 16px 12px;
  width: 676px;
  height: 14px;
  @include flex(none, center);
  @include font(14px, #909090);
  background-color: #fff;
  border-bottom: 1px solid #f4f4f4;
  .thritem {
    padding: 0px 14px;
    width: 28px;
    height: 14px;
    border-right: 1px solid #f4f4f4;
    @include flex(center, center);
    &:hover {
      color: #007fff;
    }
  }
  .sel {
    position: relative;
    #thrend {
      user-select: none;
      border: 1px solid #ebebeb;
      appearance: none;
      @include font(14px, #909090);
      padding: 0px 12px;
      width: 92px;
      outline: none;
      border-radius: 2px;
      &:hover {
        background-color: #fafafb;
      }
      option {
        border: none;
        border: 1px solid #ebebeb;
        line-height: 40px;
        &:hover {
          background-color: #fafafb;
        }
      }
    }
    .icon {
      width: 0;
      height: 0;
      position: absolute;
      right: 9px;
      top: 8px;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      transition: all 0.3s;
      z-index: 1000;
      pointer-events: none;
    }
  }

  .thritem:nth-child(3) {
    border: none;
  }
  .thritem:nth-child(1) {
    color: #007fff;
  }
}
</style>